<template>
    <div class="brand-box">
        <!--        <h1>我的天</h1>-->
        <div class="search-box">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="商品类型名称" style="float: left;margin-left: 500px">
                    <el-input placeholder="类型名称" v-model="searchParams.typeName"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 50px;float: left">
                    <el-button type="primary" @click="searchGoodsbrand">查询</el-button>
                    <!--                    <el-button type="warning" @click="resetForm">重置</el-button>-->
                </el-form-item>
            </el-form>
        </div>
        <!--操作按钮 @click="dialogVisible=true,formData={},imageUrl=''"-->
        <div class="crud-box">
            <el-button style="margin-right: 250px;float: right" type="success" icon="el-icon-edit" size="mini"
                       @click="showGoods=true">
                新增
            </el-button>
        </div>
        <!--table展示数据-->
        <div class="table-box">
            <el-table
                    :data="brandList"
                    style="width: 100%"
                    @selection-change="checkBoxSelectionChange"
            >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="typeId"
                        label="类型编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="typeName"
                        label="类型名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandDesc"
                        label="品牌描述">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="address"
                        label="操作">

                    <template v-slot="obj">
                        <el-button type="success" icon="el-icon-edit" size="mini"
                                   @click="chooseBrand=true,searchTruebrand,selectForm.typeId=obj.row.typeId">
                            选用品牌
                        </el-button>
                        <el-button type="success" icon="el-icon-edit" size="mini"
                                   @click="dialogVisibleEdit=true,editType(obj.row)">
                            修改
                        </el-button>
                        <el-popconfirm
                                confirm-button-text='确认'
                                cancel-button-text='取消'
                                @confirm="deleteProductById"
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定删除这一条数据吗？"
                        >
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                       @click="deleteForm.typeId=obj.row.typeId">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="page-box">
            <el-pagination
                    background
                    :current-page="searchParams.currentPage"
                    :page-size="searchParams.pageSize"
                    layout="prev, pager, next"
                    @current-change="currentPageChange"
                    :total="total">
            </el-pagination>
        </div>


        <!--弹框-->
        <div class="dialog-box">
            <el-dialog
                    title="选择品牌"
                    :visible.sync="chooseBrand"
                    width="40%"
            >
                <div class="search-box">
                    <el-form :inline="true" class="demo-form-inline" size="mini">
                        <el-form-item label="品牌名称" style="float: left;margin-left: 500px">
                            <el-input placeholder="品牌名称" v-model="brandParams.brandName"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-left: 50px;float: left">
                            <el-button type="primary" @click="searchTruebrand">查询</el-button>
                            <!--                    <el-button type="warning" @click="resetForm">重置</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>

                <!--table展示数据-->
                <div class="table-box">
                    <el-table
                            :data="TurebrandList"
                            style="width: 100%"
                            @selection-change="checkBoxSelectionChange"
                    >
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="brandId"
                                label="品牌编号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="brandName"
                                label="品牌名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="brandWebsite"
                                label="品牌网址"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="brandDesc"
                                label="品牌描述">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="address"
                                label="操作">

                            <template v-slot="obj">

                                <el-button type="success" icon="el-icon-edit" size="mini"
                                           @click="chooseBrand=false,initProduct(obj.row)">
                                    选择
                                </el-button>
                            </template>


                        </el-table-column>
                    </el-table>
                </div>
                <div class="page-box">
                    <el-pagination
                            background
                            :current-page="brandParams.currentPage"
                            :page-size="brandParams.pageSize"
                            layout="prev, pager, next"
                            @current-change="currentPageChange1"
                            :total="Brandtotal">
                    </el-pagination>
                </div>
            </el-dialog>

        </div>
        <div class="dialog-box">
            <el-dialog
                    title="修改"
                    :visible.sync="dialogVisibleEdit"
                    width="40%"
            >
                <el-form ref="form" :model="formDataEdit" label-width="240px">
                    <el-form-item label="类型名称" style="margin-right: 200px">
                        <el-input placeholder="类型名称" v-model="formDataEdit.typeName" style="width: 205px"></el-input>
                    </el-form-item>

                    <el-form-item label="类型描述" style="margin-right: 200px">
                        <el-input placeholder="类型描述" v-model="formDataEdit.typeDesc"
                                  style="width: 205px"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="品牌描述" style="margin-right: 200px">-->
<!--                        <el-input placeholder="品牌描述" v-model="formDataEdit.brandDesc" style="width: 205px"></el-input>-->
<!--                    </el-form-item>-->
                </el-form>
                <br>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleEdit = false" size="small">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleEdit = false,typeEdit()" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </div>

        <div class="dialog-box">
            <el-dialog
                    title="修改"
                    :visible.sync="showGoods"
                    width="40%"
            >
                <el-form ref="form" :model="addFirstProducts" label-width="240px">
                    <el-form-item label="类型名称" style="margin-right: 200px">
                        <el-input placeholder="类型名称" v-model="addFirstProducts.typeName" style="width: 205px"></el-input>
                    </el-form-item>

                    <el-form-item label="类型描述" style="margin-right: 200px">
                        <el-input placeholder="类型描述" v-model="addFirstProducts.typeDesc"
                                  style="width: 205px"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="品牌描述" style="margin-right: 200px">-->
                    <!--                        <el-input placeholder="品牌描述" v-model="formDataEdit.brandDesc" style="width: 205px"></el-input>-->
                    <!--                    </el-form-item>-->
                </el-form>
                <br>
                <span slot="footer" class="dialog-footer">
    <el-button @click="showGoods = false" size="small">取 消</el-button>
    <el-button type="primary" @click="showGoods = false,addTypes()" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>

</template>

<script>
    import goodtype from './goodtype'

    export default goodtype;
</script>

<style src="./index.scss" lang="scss">
</style>